<template>
  <div>
    <a-drawer
      title="薪资明细"
      placement="right"
      :closable="false"
      destroy-on-close
      :visible="show"
      :width="540"
      @close="$emit('update:show', false)"
    >
      <div class="title  header ">
        <div>
          <img class="inline_img mg_r20" src="http://temp.im/88x88" alt="" />
        </div>
        <div class=" flex_col">
          <div class="sbu_header mg_b20" />
          <div>青岛视点创意有限公司</div>
        </div>
      </div>
      <!-- content -->
      <!-- 展示工资卡 -->
      <div v-if="!clickEditor">
        <div class="ta-right line_h80">
          <a-button @click="clickEditor = !clickEditor">
            明细
          </a-button>
        </div>
        <div class="phone">
          <div class="phone_title">
            <div class="name">实发工资</div>
            <div class="money">{{ obj.salaryReal }}</div>
            <div class="phone_title_nav" />
            <img src="@/assets/img/beijing.png" alt="" />
          </div>
          <div class="phone_inher">
            <div class="phone_inher_bac">
              <div class="phone_inher_box">
                <div class="row_item">
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit ta-left">姓名</a-col>
                    <a-col :span="12" class="sub_tit ta-right">级别</a-col>
                  </a-row>
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.name }}</a-col>
                    <a-col :span="12" class="sub_tit cont ta-right">{{ obj.depName }}</a-col>
                  </a-row>
                </div>

                <div class="row_item">
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit ta-left">出勤天数</a-col>
                    <a-col :span="12" class="sub_tit ta-left">基本工资</a-col>
                  </a-row>
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.workingDays }}</a-col>
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.salaryBasic }}</a-col>
                  </a-row>
                </div>

                <div class="row_item">
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit ta-left">团队提成</a-col>
                    <a-col :span="12" class="sub_tit ta-left">业务佣金</a-col>
                  </a-row>
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.teamCommission }}</a-col>
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.businessCommission }}</a-col>
                  </a-row>
                </div>

                <div class="row_item">
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit ta-left">缺勤扣款</a-col>
                    <a-col :span="12" class="sub_tit ta-left">未打卡扣款</a-col>
                  </a-row>
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.absenteeismDed }}</a-col>
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.uncheckedDed }}</a-col>
                  </a-row>
                </div>

                <div class="row_item">
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit ta-left">迟到扣款</a-col>
                    <a-col :span="12" class="sub_tit ta-left">加班费</a-col>
                  </a-row>
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.lateDed }}</a-col>
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.overtimePay }}</a-col>
                  </a-row>
                </div>

                <div class="row_item">
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit ta-left">补贴</a-col>
                    <a-col :span="12" class="sub_tit ta-left">其他扣款</a-col>
                  </a-row>
                  <a-row type="flex">
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.subsidy }}</a-col>
                    <a-col :span="12" class="sub_tit cont ta-left">{{ obj.othersDed }}</a-col>
                  </a-row>
                </div>
              </div>
              <a-row type="flex" class="row_item bor_l">
                <a-col :span="12" class="ta-left sub_tit">实发工资</a-col>
                <a-col :span="12" class="ta-right cont">{{ obj.salaryReal }}</a-col>
              </a-row>
            </div>
            <div class="foot_bag" />
            <div class="phone_footer">
              <a-button class="mg_r10 bor_r22" @click="openHr">
                对工资有疑问
              </a-button>
              <!--  <a-button
                class="btn_bag bor_r22"
                @click="$emit('update:show', false)"
                >确认无误</a-button
              > -->
            </div>
          </div>
        </div>
      </div>

      <!-- 编辑详情 -->
      <div v-if="clickEditor">
        <div>
          <div class="form_item bg_gray mb20">
            编辑明细
          </div>
          <a-form>
            <a-form-item label="实发工资" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.salaryReal" disabled />
            </a-form-item>
            <a-form-item label="基本工资" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.salaryBasic" disabled />
            </a-form-item>
          </a-form>
        </div>
        <div class="mg_t20 mg_b20" style="border-bottom:1px solid #ccc" />
        <div>
          <a-form>
            <a-form-item label="出勤天数" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.workingDays" disabled />
            </a-form-item>
            <a-form-item label="团队提成" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.teamCommission" disabled />
            </a-form-item>
            <a-form-item label="业务佣金" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.businessCommission" disabled />
            </a-form-item>
            <a-form-item label="缺勤扣款" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.absenteeismDed" disabled />
            </a-form-item>
            <a-form-item label="未打卡扣款" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.uncheckedDed" disabled />
            </a-form-item>
            <a-form-item label="迟到扣款" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.lateDed" disabled />
            </a-form-item>
            <a-form-item label="加班费" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.overtimePay" disabled />
            </a-form-item>
            <a-form-item label="补贴" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.subsidy" disabled />
            </a-form-item>
            <a-form-item label="其他扣款" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
              <a-input v-model="obj.othersDed" disabled />
            </a-form-item>
          </a-form>
        </div>
      </div>
      <!--    <footer>
        <a-button class="btn_bag mg_r10" @click="onSave">保存</a-button>
        <a-button @click="onCancel">取消</a-button>
      </footer> -->
    </a-drawer>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "EditorPayroll",

  props: {
    show: {
      type: Boolean,
      default: false
    },
    payrollOptions: {}
  },
  data() {
    return {
      clickEditor: true,
      obj: {},
      keys: []
    };
  },
  computed: {
    ...mapState(["hr"])
  },
  watch: {
    payrollOptions: {
      handler(val) {
        this.obj = val;
        this.obj.companyId = this.hr.companyId;
      }
    },
    show: {
      handler(val) {
        this.clickEditor = !val;
      }
    }
  },

  methods: {
    // 有疑问?
    openHr() {
      const _this = this;
      this.$info({
        title: "提示",
        content: `请联系HR`,
        onOk() {
          _this.$emit("update:show", false);
        }
      });
    },
    onSave() {
      this.$emit("update:show", false);
      this.$emit("editor", this.obj);
    },
    // 查看编辑明细
    lookEditor() {
      this.clickEditor = !this.clickEditor;
    },
    // 取消
    onCancel() {
      this.show && this.clickEditor ? (this.clickEditor = false) : this.$emit("update:show", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  height: 118px;
  box-shadow: 0px 1px 0px 0px rgba(232, 232, 232, 1);

  .inline_img {
    width: 88px;
    height: 88px;
    border-radius: 88px;
  }
}
.title {
  display: flex;
  flex-direction: row;
}
.form_item {
  padding-left: 20px;
  height: 48px;
  line-height: 48px;
}
.bot_1 {
  box-shadow: 0px -1px 0px 0px rgba(232, 232, 232, 1);
  height: 20px;
}
footer {
  text-align: center;
  box-shadow: 0px -1px 0px 0px #e8e8e8;
  margin-top: 20px;
  line-height: 60px;
}
.phone {
  box-sizing: border-box;
  min-height: 656px;
  width: 315px;
  margin: 0 auto;
  border: 2px solid #e8e8e8;
  border-radius: 22px;
  text-align: center;
  position: relative;
  .phone_title {
    position: relative;
    .name {
      width: 100%;
      position: absolute;
      top: 50px;
      text-align: center;
      color: #fff;
    }
    .money {
      color: #fff;
      width: 100%;
      position: absolute;
      top: 80px;
      text-align: center;
      font-size: 26px;
    }
    .phone_title_nav {
      position: absolute;
      top: 10px;
      transform: translateX(-50%);
      left: 50%;
      background: #fff;
      height: 22px;
      width: 176px;
      border-radius: 0 0 20px 20px / 0 0 20px 20px;
    }
    img {
      width: 295px;
      margin-top: 10px;
      border-radius: 22px;
    }
  }
  .phone_footer {
    position: absolute;
    bottom: 30px;
    width: 275px;
    &::before {
      position: absolute;
      bottom: -26px;
      content: "";
      border-radius: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 4px;
      background: #ccc;
    }
  }
  .phone_inher {
    position: absolute;
    top: 153px;
    left: 8px;
    min-height: 490px;
    width: 295px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background: #fff;

    .phone_inher_bac {
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #e8e8e8;
    }
    .foot_bag {
      height: 80px;
      background: #f9f9f9;
    }
    .phone_inher_box {
      padding: 16px;
      .row_item {
        margin-bottom: 12px;
      }
    }
    .bor_l {
      border-left: 2px solid var(--primary);
      padding: 0 16px;
    }
  }
  .cont {
    font-weight: 600;
    color: #000;
  }
}
</style>
